<template>
    <div class="articles">
        <el-row class="bar">
            <el-button type="primary" @click="handleAdd" icon="el-icon-plus" >新增</el-button>
        </el-row>
        <el-table :data="articles" stripe border>
            <el-table-column align="center" prop="title" label="标题"></el-table-column>
            <el-table-column align="center" prop="publishedTime" value-format="yyyy-MM-dd HH:mm:ss"
                             　label="发布时间"></el-table-column>
            <el-table-column align="center" prop="viewNum" label="浏览次数"></el-table-column>
            <el-table-column align="center" prop="commentNum" label="评论数"></el-table-column>
            <el-table-column align="center" prop="isTop" label="是否置顶">
                <template slot-scope="scope">
                    <el-switch
                            @change="updateStatus(scope.row)"
                            v-model="scope.row.isTop"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <!--<el-table-column align="center" prop="topTime" label="置顶时间"></el-table-column>-->
            <el-table-column align="center" prop="isCommand" label="是否推荐">
                <template slot-scope="scope">
                    <el-switch
                            @change="updateComStatus(scope.row)"
                            v-model="scope.row.isCommand"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                    >
                    </el-switch>
                </template>
            </el-table-column>


            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">

            <mavon-editor class="m-editor" v-model="newValue"/>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "Articles",
        data() {
            return {
                articles: null,
                confirm: true,
                dialogVisible:false,
                newValue:"",
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px'
            }
        },
        created: function () {
            this.$http.get('/articles')
                .then(res => {
                    this.articles = res.data.list;
                    console.log(this.articles);

                })
                .catch(error => {
                    console.log(error);
                });
        },
        methods: {
            handleAdd(){
                this.dialogVisible = true;
            }
            ,
            handleEdit(index, row) {
                this.dialogVisible = true;
                console.log(index);
                console.log(row);
            },
            updateStatus(row) {
                console.log(row.isTop == '1');
                this.$http.put("/articles/" + row.id, {
                    isTop: row.isTop
                })
                    .then(res => {
                        this.$notify({
                            title: '提示',
                            message: res.data.msg,
                            position: 'bottom-right'
                        });
                    }).catch(error => {

                });
            },
            updateComStatus(row) {
                this.$http.put("/articles/" + row.id, {
                    isCommand: row.isCommand
                }).then(res => {
                    this.$notify({
                        title: '提示',
                        message: res.data.msg,
                        position: 'bottom-right'
                    });
                })
                    .catch(error => {
                    });
            }
        }

    }
</script>

<style scoped>
    .bar {
        text-align: left;
        margin: 20px 10px 10px 10px;
    }

    form .el-input{
        width: 300px;
    }
    form .el-select{
        width: 300px;
    }

    .m-editor{
        height: 100%;
    }
</style>